import React, { FC, useEffect, useRef, useState } from 'react'
import { Image,Row,Col,Carousel } from 'antd';
import * as echarts from "echarts"

 const Main:FC<any>=()=> {

  const [list,setList] = useState<Array<string>>(
    [
      'http://47.104.209.44/base/img/1.jpg',
      'http://47.104.209.44/base/img/2.jpg',
      'http://47.104.209.44/base/img/3.jpg',
      'http://47.104.209.44/base/img/4.jpg',
      'http://47.104.209.44/base/img/5.jpg',
    ]
  )
  //Echarts表
  const chartOne:any=useRef()
 
  
  const setEchartInit=()=>{
    console.log(chartOne);
    var myChart = echarts.init(chartOne.current);
  var option = {
    xAxis: {
      type: 'category',
      data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    },
    yAxis: {
      type: 'value'
    },
    series: [
      {
        data: [120, 200, 150, 80, 70, 110, 130],
        type: 'bar'
      }
    ]
  };
  // 使用刚指定的配置项和数据显示图表。
  myChart.setOption(option);
  }
  useEffect(()=>{
    setEchartInit()
  })
  return (
    <div>
        <Row>
          <Col span={11}>
              <div style={{width:"100%",height:400}}>
                <Carousel autoplay >
                    {
                      list.map((item,index)=>(
                          <div key={index} >
                              <Image src={item} height={400} width={'100%'} preview={false}></Image>
                          </div>
                      ))
                    }
                  </Carousel>
            
              </div>
          </Col>

          <Col span={11} offset={1}>
            <div
                ref={chartOne}
                style={{width:'100%',height:400}}          
            ></div>
          </Col>

        </Row>
    </div>
  )
}
export default Main